/**
 * Created by maiseries on 2018/1/2.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableWithoutFeedback,
    PanResponder
} from 'react-native';

export default class IndexCardView extends React.Component {

    static propTypes = {
        title: React.PropTypes.string,
        rightText: React.PropTypes.string,
        rightEvent: React.PropTypes.func,
    }

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <View style={[styles.cardBox, this.props.style]}>
                {
                    this.props.title ?
                        <View style={[base.rowCC, styles.titleBox]}>
                            <View style={styles.titleLeft}/>
                            <Text allowFontScaling={false} style={styles.titleText}>{this.props.title}</Text>
                            <TouchableWithoutFeedback
                                onPress={() => this.props.rightEvent ? this.props.rightEvent() : {}}>
                                <View style={styles.titleRightBox}>
                                    <Text allowFontScaling={false} style={styles.titleRight}>{this.props.rightText}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View> :
                        <View/>
                }
                <View style={styles.contentBox}>
                    {
                        this.props.children
                    }
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    cardBox: {
        marginBottom: layout.GAP_VERTICAL_MID,
        width: layout.MAX_WIDTH,
        backgroundColor: '#fff'
    },
    titleBox: {
        width: layout.MAX_WIDTH,
        height: layout.height(74),
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        borderBottomColor: '#f3f3f1',
        borderBottomWidth: layout.LINE_WIDTH * 2
    },
    titleLeft: {
        width: layout.width(4),
        height: layout.height(32),
        backgroundColor: layout.MAIN_COLOR
    },
    titleText: {
        flex: 1,
        paddingLeft: layout.GAP_HORIZONTAL_MID,
        color: layout.MAIN_FONT_COLOR,
        fontSize: layout.font(30)
    },
    titleRightBox: {},
    titleRight: {},
    contentBox: {}
})